<template>
  <Card :title="t('routes.dashboard.workplaceSetting.participateProject')" v-bind="$attrs">
    <template #extra>
      <a-button type="link" size="small">{{ t('routes.dashboard.more') }}</a-button>
    </template>
    <BasicTable @register="registerTable">
      <!-- 项目状态 -->
      <template #status="{ text: status }">
        <span>
          <Tag
            :color="
              status == 0
                ? 'default'
                : status == 1
                ? 'processing'
                : status == 2
                ? 'success'
                : status == 3
                ? 'error'
                : 'warning'
            "
            >{{ proxy.$filters.filterProjStatus(status) }}</Tag
          >
        </span>
      </template>
      <!-- 完成比例 -->
      <template #completeRatio="{ text: completeRatio }">
        <span>
          <Progress :percent="completeRatio" size="small" />
        </span>
      </template>
    </BasicTable>
  </Card>
</template>

<script lang="ts" setup>
  import { getCurrentInstance } from 'vue';
  import { Card, Tag, Progress } from 'ant-design-vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { getWorkPlaceColumns } from './tableData';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  const { proxy }: any = getCurrentInstance();

  const [registerTable] = useTable({
    // 分页配置
    pagination: false,
    columns: getWorkPlaceColumns(),
    useSearchForm: false,
    showTableSetting: false, // 显示表格设置工具
    tableSetting: { fullScreen: false }, // 表格设置工具配置
    bordered: true,
    showIndexColumn: false,
    dataSource: [
      {
        name: '项目A',
        status: 0,
        completeRatio: 0,
      },
      {
        name: '项目B',
        status: 1,
        completeRatio: 50,
      },
      {
        name: '项目C',
        status: 2,
        completeRatio: 100,
      },
      {
        name: '项目D',
        status: 0,
        completeRatio: 0,
      },
      {
        name: '项目E',
        status: 1,
        completeRatio: 30,
      },
    ],
  });
</script>
